<template>
    <div class="container  wow animate__animated animate__fadeInRight" data-wow-duration="2s">
        <div class="row">
            <div class="col-lg-6 textArea">
                <h3>关于我们</h3>
                <p>上海昨非成立于2009年，2009年至2020年期间从事生物实验/检测相关，国内外知名品牌的设备，试剂，耗材的代理和经销业务。</p>
                <router-link class="more" to="/about">了解更多</router-link>
            </div>
            <div class="col-lg-6 imgArea">
                <img src="./images/aboutus.png" alt="aboutus">
            </div>
        </div>
    </div>
</template>
<script>
    import { useRouter } from 'vue-router'
    import { onMounted, nextTick } from "vue";
    import { WOW } from 'wowjs'
    import "animate.css";
    export default {
        name: "AboutUs",
        setup() {
            const router = useRouter()

            onMounted(() => {
                //初始化wow.js(页面滚动加载动画)
                nextTick(() => {   //页面渲染完，在执行
                    let wow = new WOW({
                        live: false
                    })
                    wow.init()
                })
            });
            return {}
        }
    }
</script>
<style scoped>
    .textArea {
        background-color: #FFF;
        font-family: "Source Han Sans CN";

    }

    .textArea h3 {
        font-size: 30px;
        font-weight: 500;
        text-align: center;
        color: #4F68AC;
        margin-bottom: 50px;
    }

    .textArea p {
        font-size: 14px;
        color: #666;
        text-align: center;
        line-height: 24px;
    }

    .textArea .more {
        height: 40px;
        line-height: 40px;
        width: 140px;
        text-align: center;
        display: block;
        margin: 50px auto 0px;
        border: 1px solid #999;
        background-color: #fff;
        font-size: 14px;
        color: #999;
        transition: background-color 0.5s ease;
    }

    .textArea .more:hover {
        text-decoration: none;
        background-color: #4F68AC;
        color: #fff;
    }

    .imgArea {
        padding: 0px;
    }

    .imgArea img {
        width: 100%;
    }

    /* 设置响应式 */
    /* 移动端 */
    @media (max-width: 768px) {
        .textArea {
            padding: 50px 40px;
        }
    }

    /* PC端 */
    @media (min-width: 768px) {
        .textArea {
            padding: 77.5px 112px;
        }
    }
</style>